如果案例有问题，可到QQ群找到今日相关压缩文件下载测试。

WXML:

         
            
               
        
         电话
              
             
               
        
         发布
              
             
               
        
         咨询
              
           
          
            
           
        
     

WXSS:

.cebian {  width: 50px;  height: auto;  display: flex;  flex-direction: column;  position: fixed;  bottom: 60px;  right: 20px;  z-index: 10;  overflow: hidden;}.anniu{  position: relative;  left: 50px;}.cebian01, .cebian02,.cebian03,.cebian04 {  height: 50px;  width: 50px;  text-align: center;  line-height: 50px;  border-radius: 60px;  color: #fff;}.cebian02,.cebian03,.cebian04{  margin-top: 10px;}.cebian01{  background-color: #50cb67;}.cebian02{  background-color: #6785e5;}.cebian03{  background-color: #ec4149;}.cebian04{  background-color: #949494;  position: relative;}.cebian04>image{  width: 30px;  height: 30px;  position: relative;  top: 10px;  }

JS:

Page({  data: {    jiantous: false,    anniuimg: '/picture/jiantou01.png',  },  /*右侧按钮部分效果*/  onReady: function () {    this.animation = wx.createAnimation();    this.animations = wx.createAnimation()  },  anniuhide: function () {    var leftjian = this.data.jiantous;    if (leftjian == false) {      this.animation.translate(50, 0).step();      this.animations.rotate(180).translate(3,0).step();      leftjian = true;    } else {      this.animation.translate(0, 0).step();      this.animations.rotate(0).translate(0, 0).step();      leftjian = false;    }    this.setData({      animation: this.animation.export(),      animations: this.animations.export(),      jiantous: leftjian,    });  },})

效果图：